<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>天哥の网页</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        html,
        body {
            height: 100%;
            width: 100%;
            background: rgb(14, 239, 247);
        }

        h1 {
            text-align: center;
            color: #fff;
            font-size: 48px;
            font-family: "Fruktur", cursive;
            text-shadow: 1px 1px 1px #ccc, 0 0 10px #fff, 0 0 20px #fff,
                0 0 30px #fff, 0 0 40px #ff00de, 0 0 70px #ff00de, 0 0 80px #ff00de,
                0 0 100px #ff00de, 0 0 150px #ff00de;
        }

        .shatian {
            display: flex;
            justify-content: center;
            align-items: center;
            position: fixed;
            right: 1%;
            top: 1%;
            width: 14%;
        }

        /* .dashuaibi{
            display: flex;
            justify-content: center;
            align-items: center;
            height: 10%;
            position: fixed;
            right: 12%;
            top: 1%;
            } */
        @media screen and (max-device-width:641px) and (max-device-height:764px) {
            .dashuaibi {
                display: flex;
                justify-content: center;
                align-items: center;
                /* height: 10%; */
                width: 10%;
                position: fixed;
                right: 15%;
                top: 5%;
            }
        }

        @media only screen and (min-device-width:641px) and (min-device-height:764px) {

            .dashuaibi {
                display: flex;
                justify-content: center;
                align-items: center;
                width: 15%;
                position: fixed;
                right: 12%;
                top: 20%;
            }
        }

        .img {
            width: auto;
            height: auto;
            max-width: 100%;
            max-height: 100%;
        }
    </style>
</head>

<body>
    <h1>我命由我不由天！</h1>
    <h1>诶？好像我就是天……</h1>
    <div class="dashuaibi">
        <img src="dashuaibi.jpg" class="img">
    </div>
    <div class="shatian">
        <img src="shatian.jpg" class="img">
    </div>
    <!-- <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1585108099774&di=94097bc0c306714a1313a941cdc1c436&imgtype=0&src=http%3A%2F%2Fi2.hdslb.com%2Fbfs%2Farchive%2F778e90d61d78c06ee3b7754ad98a27298b40d938.jpg" alt=""> -->
    <img src="http://pic1.win4000.com/pic/4/31/ed6f1496442.jpg" alt="">
    <img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=4145056866,14617280&fm=26&gp=0.jpg" alt="">
    <img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1280778662,1401853715&fm=26&gp=0.jpg" alt="">
    <img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3138498332,3006690035&fm=26&gp=0.jpg" alt="">
    <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1585108706903&di=447c3828facb96debc3f6354f0fde53f&imgtype=0&src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fimages%2F20171223%2F24be006e6921474d8d6a27ec83a1e9e0.jpeg"
        alt="">
    <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1585108803613&di=79f3df17d237e19d81455a91ce8b3011&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fbaike%2Fpic%2Fitem%2F34bbf8cd46ba0c0e0fb345b7.jpg"
        alt="">
    <img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2810926196,4141517356&fm=26&gp=0.jpg" alt="">
    <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1585108891808&di=9ca3a993347e6fd85233d918d2466d21&imgtype=0&src=http%3A%2F%2Fpic41.nipic.com%2F20140508%2F12413954_161446509121_2.png"
        alt="">
    <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1585108933862&di=6648ff0c43edc7e603fd5f26541459f0&imgtype=0&src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fimages%2F20180318%2Feef7fcba3cee4133b548eacce5ae7278.jpeg"
        alt="">
    <img src="http://gss0.baidu.com/-Po3dSag_xI4khGko9WTAnF6hhy/zhidao/pic/item/29381f30e924b899e22e861169061d950a7bf68d.jpg"
        class="img" alt="">

    <!-- 看板娘-->
    <script src="https://cdn.jsdelivr.net/gh/Fofade/cnblogsThemes@1.1/live2dw/lib/L2Dwidget.min.js"></script>
    <script src="https://cdn.jsdelivr.net/gh/Fofade/cnblogsThemes@1.1/live2dw/lib/L2Dwidget.0.min.js"></script>
    <script>
        L2Dwidget.init({
            "model": {
                "scale": 1,
                "hHeadPos": 0.5,
                "vHeadPos": 0.618,
                "jsonPath": "https://cdn.jsdelivr.net/gh/Fofade/cnblogsThemes@1.1/live2dw/assets/z16.model.json"
            },
            "display": {
                "superSample": 2,
                "width": 185,
                "height": 375,
                "position": "right",
                "hOffset": 0,
                "vOffset": -20
            },
            "mobile": {
                "show": true,
                "scale": 0.5
            },
            "react": {
                "opacityDefault": 0.7,
                "opacityOnHover": 0.2
            }
        });
    </script>
    <div id="live2d-widget">
        <canvas id="live2dcanvas" width="200" height="440"
            style="position: fixed; opacity: 1; left: 0px; bottom: 0; z-index: 99999; pointer-events: none;"></canvas>
    </div>
</body>

</html>